<template>
    <div class="app-container">
        <el-row :gutter="10" :style="{ marginBottom: '10px' }">
            <el-col :span="1.5">
                <!-- 选择月份 -->
                <el-date-picker v-model="statsMonth" type="month" placeholder="选择月份" style="width: 200px" value-format="yyyy-MM" @change="handleDateChange"></el-date-picker>
            </el-col>
            <el-col :span="1.5">
                <!-- 演练类型选择 -->
                <el-select v-model="drillType" placeholder="请选择演练类型" :style="{ width: '100%' }" @change="handlePlanTypeChange">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="dict in dict.type.usetypecode_dict" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-col>
            <el-col :span="1.5">
                <!-- 演练单位选择 -->
                <el-input v-model="makeDeptName" placeholder="选择演练部门" :style="{ width: '100%' }" @focus="selectMakeDept"> </el-input>
            </el-col>
            <el-col :span="1.5" style="float: right">
                <el-button type="primary" @click="changeMode" :icon="mode == 'table' ? 'el-icon-s-data' : 'el-icon-s-grid'">{{ mode == "table" ? "切换图表模式" : "切换表格模式" }}</el-button>
            </el-col>
            <el-col :span="1.5" style="float: right">
                <el-button type="warning" @click="exportExcel" icon="el-icon-printer">导出Excel</el-button>
            </el-col>
        </el-row>
        <template v-if="mode == 'table'">
            <el-table v-loading="loading" :data="list" border>
                <el-table-column label="月份" align="center" prop="month" width="180"> </el-table-column>
                <el-table-column label="演练部门" align="center" prop="deptName" width="180"> </el-table-column>
                <el-table-column label="演练次数" align="center" prop="total"> </el-table-column>
                <el-table-column label="未开始" align="center" prop="unStart"> </el-table-column>
                <el-table-column label="进行中" align="center" prop="running"> </el-table-column>
                <el-table-column label="已完成" align="center" prop="finished"> </el-table-column>
            </el-table>
        </template>
        <template v-if="mode == 'chats'">
            <div id="drillStatsCharts" style="width: 100%; height: 400px"></div>
        </template>
        <dept-picker ref="deptPicker" :muilt="false" @handleOk="setMakeDept" />
    </div>
</template>
<script>
import { getDrillStatistics } from "@/api/drill/drill";
import DeptPicker from "@/views/components/deptPicker/index.vue";
const moment = require("moment");
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import EchartsOption from "./chats/DrillStatsChartsOption";
export default {
    name: "DrillStats",
    dicts: ["usetypecode_dict"],
    components: { DeptPicker },
    data() {
        return {
            statsMonth: null,
            drillDept: null,
            drillType: null,
            list: [],
            loading: false,
            makeDeptName: "",
            mode: "table",
            echarts: null,
        };
    },
    mounted() {
        this.statsMonth = moment().format("YYYY-MM");
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            getDrillStatistics({
                statsMonth: this.statsMonth,
                drillDept: this.drillDept,
                drillType: this.drillType,
            }).then(res => {
                this.list = res.data;
                this.loading = false;
            });
        },
        handleDateChange() {
            this.getList();
        },
        handlePlanTypeChange() {
            this.getList();
        },
        handleEventTypeChange() {
            this.getList();
        },
        selectMakeDept() {
            this.$refs.deptPicker.show();
        },
        setMakeDept(dept) {
            this.drillDept = dept.id;
            this.makeDeptName = dept.name;
            this.getList();
        },
        changeMode() {
            if (this.mode == "table") {
                this.mode = "chats";
                this.setCharts();
            } else {
                this.mode = "table";
                this.echarts.dispose();
            }
        },
        setCharts() {
            this.$nextTick(() => {
                this.echarts = echarts.init(document.getElementById("drillStatsCharts"), "macarons");
                EchartsOption.title.text = `${this.statsMonth}演练统计`;
                // 初始化数据
                EchartsOption.xAxis[0].data = [];
                EchartsOption.series[0].data = [];
                EchartsOption.series[1].data = [];
                EchartsOption.series[2].data = [];

                this.list.forEach(d => {
                    EchartsOption.xAxis[0].data.push(d.deptName);
                    if (d.unStart != 0) {
                        EchartsOption.series[0].data.push(d.unStart);
                    }
                    if (d.running != 0) {
                        EchartsOption.series[1].data.push(d.running);
                    }
                    if (d.finished != 0) {
                        EchartsOption.series[2].data.push(d.finished);
                    }
                });
                // 获取this.list中total最大值
                let max = Math.max(...this.list.map(d => d.total));
                EchartsOption.yAxis[0].max = Math.ceil(max * 1.6);
                this.echarts.setOption(EchartsOption);
            });
        },
        exportExcel() {
            this.download(
                "/drill/plan/exportDrillStatistics",
                {
                    statsMonth: this.statsMonth,
                    drillDept: this.drillDept,
                    drillType: this.drillType,
                },
                `演练统计.xlsx`
            );
        },
    },
};
</script>
<style lang="scss" scoped>
#drillStatsCharts {
    margin-top: 40px;
}
</style>
